<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>04_样式类名操作</title>
		<script src="../js/jquery-1.11.1.js"></script>
		<!-- 样式类名操作：针对css3、添加、移除、切换的元素"类名"操作
		     addClass()-------有参：1个参加和多个参加
			                  语法：addClass("类名")
							  <p class="类名">
							  语法：addClass("类名1 类名2");
							  <p class="类名1 类名2">
							  功能：匹配元素集合中的所有元素，添加一个或多个类名操作
							  理解：给元素添加存在的样式
			 removeClass()----功能：匹配元素集合中的所有元素，移除一个或多个类名操作
							  理解：给元素移除存在的样式
			 toggleClass()----功能：如果元素有类名移除，没有则添加
			 hasClass()-------功能：检查匹配的元素集合中是否包含指定的类名
			                  返回值：bool
		 -->
		<!-- 要求：1.引入jquery
		          2.html：div id="targetElement"
				          4个按钮  id="addClassBtn"
						           id="removeClassBtn"
								   id="toggleClassBtn"
								   id="hasClassBtn"
				          div id="resultArea"
				  3.css: .bgColor{300*300 颜色随意}
				         .broders{10个像素实线红色边框 倒角画圆}
		 -->
		<style>
			.bgColor{
				width: 300px;
				height: 300px;
				background: #a7fffd;
			}
			.broders{
				border: 10px solid red;
				border-radius: 50%;
			}
		</style>
	</head>
	<body>
		<div id="targetElement"></div>
		<button id="addClassBtn">添加类名</button>
		<button id="removeClassBtn">移除类名</button>
		<button id="toggleClassBtn">切换类名</button>
		<button id="hasClassBtn">检查类名</button>
		<div id="resultArea"></div>
		
		<script>
			//1.点击 添加类名 按钮 添加效果【样式】300*300，背景色
			/* $("#addClassBtn").click(function(){
				//div添加样式--存在样式：类名
				$("#targetElement").addClass("bgColor");
				$("#resultArea").html("<h4>添加样式类名：bgColor</h4>");
			}); */
			
			//2.点击 添加类名 按钮 添加效果【样式】圆
			$("#addClassBtn").click(function(){
				$("#targetElement").addClass("bgColor broders");
				$("#resultArea").html("<h4>添加样式类名：bgColor broders</h4>");
			});
			
			//3.还原到第一步
			$("#removeClassBtn").click(function(){
				$("#targetElement").removeClass("broders");
				$("#resultArea").html("<h4>移除样式类名：broders</h4>");
			});
			
			//4.点击 切换类名 按钮 添加效果
			$("#toggleClassBtn").click(function(){
				$("#targetElement").toggleClass("bgColor");
				$("#resultArea").html("<h4>切换样式类名：broders</h4>");
			});
			
			//5.
			//6.检查类名是否存在：true/false
			$("#hasClassBtn").click(function(){
				var hc=$("#targetElement").hasClass("broders");
				$("#resultArea").text("当前样式是否存在"+hc);
			});
		</script>
	</body>
</html>